<?php use_helper('I18N') ?>
<script>
    $(function() {
        /*******    Digital Clock   ***************/
        // Create two variable with the names of the months and days in an array
        var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
        var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

        // Create a newDate() object
        var newDate = new Date(<?php echo microtime(true) * 1000;?>);
        // Extract the current date from Date object
        newDate.setDate(newDate.getDate());
        // Output the day, date, month and year
        $('#Date').html(newDate.getDate() + '/' + (newDate.getMonth() + 1) + '/' + newDate.getFullYear() + " (GMT+8)");
        clock();
        jackpot_value();

        $("#submitLogin").click(function(){
            if ($("#username").val() == "") {
                alert("<?php echo __("User Name is empty") ?>");
                return false;
            }
            if ($("#userpassword").val() == "") {
                alert("<?php echo __("Password is empty") ?>");
                return false;
            }
            if ($("#captcha").val() == "") {
                alert("<?php echo __("Correct captcha is required") ?>");
                return false;
            }
            $("#fr_login").submit();
        });
        $("#logout").click(function(){
            window.location.replace("/home/logout");
        });
        $("#dashboard").click(function(){
            window.location.replace("/member/summary");
        });
        $("#joinnow").click(function(){
            joinnow();
        });

        <?php if ($sf_flash->has('errorMsg')) { ?>
            alert("<?php echo $sf_flash->get('errorMsg'); ?>");
        <?php } ?>
    });

    function joinnow(){
        window.location.replace("/home/register");
    }
    function clock(){
        var timer = new Date();
            // Create a newDate() object and extract the seconds of the current time on the visitor's
        var seconds = timer.getSeconds();
        var minutes = timer.getMinutes();
        var hours = timer.getHours();
        // Add a leading zero to seconds value
        $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
        $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
        $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
        setTimeout(clock, 1000);
    }

    function jackpot_value(){
        $("span[id^='jp_']").each(function(){
            var randomnumber = Math.floor(Math.random()*15)/100;
            //alert($.parseNumber(this.innerHTML, {format:"#,###.00", locale:"us"}));
            var nValue = $.parseNumber(this.innerHTML, {format:"#,###.00", locale:"us"}) + randomnumber;
            $(this).text($.formatNumber(nValue, {format:"#,###.00", locale:"us"}));
        });
        setTimeout(jackpot_value, 3000);
    }
</script>
<style>body .langsel .ui-selectmenu-item-icon {
    background-size: 22px 22px;
}

.langsel {
    font-size: 11px;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: 1px solid #666666;
    background: #555555;
    color: #eeeeee;
    outline: none;
}

.english {
    background: url(/images/cm/lang/english.png) no-repeat;
    background-position: 3px 3px;
}

.thai {
    background: url(/images/cm/lang/thai.png) no-repeat;
    background-position: 3px 3px;
}

.topMenu {
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    width: 120px;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}

.topMenu a {
    color: #fee286;
}

.hideCls {
    display: none;
}

.loginSpn {
    background: url(/images/cm/loginBut_bg.png);
    width: 50px;
    height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding-top: 4px;
    cursor: pointer;
}

.cwStyle {
    padding-left: 5px;
    padding-right: 5px;
}

.menu {
    height: 22px;
    cursor: pointer;
    font-weight: bold;
    vertical-align: middle;
    float: left;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    white-space: nowrap;
    background: url(/images/cm/menuBg.jpg) repeat-x;
    color: white;
}

.menuR {
    float: right;
    padding-top: 5px;
    height: 22px;
}

.input {
    width: 100px;
    border: 1px solid #6D6D6D;
    color: black;
    height: 18px;
    margin: 0px;
    margin-top: 1px;
}

ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.file_menu {
    display: none;
    width: 108px;
    border: 1px solid #1c1c1c;
    position: relative;
    left: -15px;
    z-index: 1001;
}

.file_menu li {
    background-color: #302f2f;
    position: relative;
}

.file_menu li a {
    color: #FFFFFF;
    text-decoration: none;
    padding: 8px;
    display: block;
    margin: 0px;
}

.file_menu li a:hover {
    background-color: white;
    padding: 8px;
    font-weight: bold;
    color: black;
}</style>
<form action="<?php echo url_for("/home/doLogin");?>" align="right" method="post" name="fr_login"
      id="fr_login" style="margin:0px;padding:0px;">

    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tbody>
        <tr>
            <td style="background:url(/images/cm/header_bg.jpg); height:119px;padding-top:0px;padding-bottom:0px;">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tbody>
                    <tr>
                        <td rowspan="2" width="150px"><a name="topMenu"
                                                         href="<?php echo url_for("/home");?>">
                            <img src="/images/cm/logo.png" style="padding:20px; padding-bottom:10px;"
                                align="left"></a></td>
                        <td style="text-align:right;padding-right:5px">
                            <div class=""
                                 style="background-color:black;border:1px solid gray;height:25px;padding:2px;width:538px;float:right;">
                                <?php if ($sf_user->isAuthenticated() && $sf_user->getAttribute(Globals::SESSION_USERTYPE) == Globals::ROLE_DISTRIBUTOR) { ?>
                                <div class="menu" id="logout"
                                     style="background:url(/images/cm/header_loginBtn.jpg) repeat-x;height:21px;width:105px;cursor:pointer;padding:0px;padding-top:4px;float:right;margin-right:2px;">
                                    <span style="font-weight:bold;font-size:12px;color:white"><?php echo __("Logout") ?></span>
                                </div>
                                <div class="menu" id="dashboard"
                                     style="background:url(/images/cm/header_loginBtn.jpg) repeat-x;height:21px;width:105px;cursor:pointer;padding:0px;padding-top:4px;float:right;margin-right:2px;">
                                    <span style="font-weight:bold;font-size:12px;color:white"><?php echo __("Dashboard") ?></span>
                                </div>
                                <div class="menu" id="joinnow"
                                     style="background:url(/images/cm/header_joinBtn.png) repeat-x;height:21px;width:105px;cursor:pointer;padding:0px;padding-top:4px;float:right;margin-right:2px">
                                    <span style="font-weight:bold;font-size:12px;color:black"><?php echo __("Join Now") ?></span>
                                </div>
                                <div class="menu"
                                     style="height:21px;width:105px;cursor:pointer;padding:0px;padding-top:4px;float:right;margin-right:2px;">
                                    <span style="font-weight:bold;font-size:12px;color:white"><?php echo __('Hi').", ".$sf_user->getAttribute(Globals::SESSION_USERNAME) ?></span>
                                </div>

                                <?php } else { ?>
                                <div class="menu" style="padding:0px;">
                                    <input class="input" type="text" tabindex="1" name="username"
                                           value="" id="username" size="10" placeholder="<?php echo __("User Name") ?>">
                                    <input class="input" type="password" tabindex="2" name="userpassword"
                                           value="" id="userpassword" size="10" placeholder="<?php echo __("Password") ?>"
                                           style="position:relative;top:+1px;">
                                </div>
                                <div class="menu" id="joinnow"
                                     style="background:url(/images/cm/header_joinBtn.png) repeat-x;height:21px;width:105px;cursor:pointer;padding:0px;padding-top:4px;float:right;margin-left:2px">
                                    <span style="font-weight:bold;font-size:12px;color:black"><?php echo __("Join Now") ?></span>
                                </div>
                                <div class="menu" id="submitLogin"
                                     style="background:url(/images/cm/header_loginBtn.jpg) repeat-x;height:21px;width:105px;cursor:pointer;padding:0px;padding-top:4px;float:right;margin-right:2px;">
                                    <span style="font-weight:bold;font-size:12px;color:white"><?php echo __("Login") ?></span>
                                </div>
                                <div class="menu" style="padding:0px 0px 0px 8px" id="refreshimg">
                                    <a href="<?php echo $_SERVER['PHP_SELF']; ?>" title="Click to refresh image">
                                        <img src="/captcha/image?<?php echo time(); ?>" width="60" height="25" alt="Captcha image" style="border-style: none"/>
                                    </a>
                                </div>
                                <div style="float:right;padding-left:4px;padding-right:4px;">
                                    <input class="input" tabindex="3" type="text" name="captcha" placeholder="<?php echo __("Code") ?>"
                                           id="captcha" maxlength="4" style="width:35px;">
                                </div>
                                <?php } ?>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right:5px;padding-top:2px">
                            <div style="font-size:12px;font-weight:bold;padding:10px;color:white;float:right;height:15px;padding:1px;padding-top:5px;margin-top:2px;">
                                <a href="<?php echo url_for("/home/promotion");?>"><?php echo __("Promotions") ?></a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                                <a href="<?php echo url_for("/home/aboutUs");?>" target="_top"><?php echo __("About Us") ?></a>&nbsp;&nbsp;&nbsp;
                                <span class="">|&nbsp;&nbsp;&nbsp;<a
                                        href="<?php echo url_for("/home/forgetPassword");?>"><?php echo __("Forgot Password") ?></a>?</a>&nbsp;&nbsp;&nbsp;</span>
                            </div>

                            <!--<div id="google_translate_element"></div><script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
    }
    </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
                        </td>
                    </tr>
                    <tr class="">
                        <td style="border-bottom:1px solid gray;padding:0px;margin:0px;margin-top:15px;background:url(/images/cm/menuBg.jpg) repeat-x;background-position:0px 0px;border-top:1px solid black;"
                            colspan="2">
                            <div id="m_promotion" class="menu menuR" name="topMenu"
                                 onclick="window.location.href=&#39;/home/contactUs&#39;"
                                 style="background-image: url(/images/cm/menuBg.jpg); color: white;">
                                <?php echo __("Contact Us") ?>
                            </div>
                            <div id="m_sports" class="menu menuR" name="topMenu"
                                 onclick="window.location.href=&#39;/home/promotion&#39;"><?php echo __("Promotions") ?>
                            </div>
                            <div id="m_livecasino" class="menu menuR" name="topMenu"
                                 onclick="window.location.href=&#39;/home/product&#39;"><?php echo __("Shop") ?>
                            </div>
                            <div id="m_language" class="menu menuR" name="topMenu"><a href="/home/language?lang=cn">中文</a> | <a href="/home/language?lang=en">English</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="background-color:black;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0"
                                   style="padding-top:0px;margin-top:0px;position:relative;top:0px;height:19px;">
                                <tbody>
                                <tr>
                                    <td style="background-color:black;" width="730px">
                                        <div style="width:100%; color:gold;height:19px;padding:0px;">
                                            <div style="padding-top:3px;height:19px;text-align:center">
                                                <marquee direction="left" scroll="continuous" scrollamount="3"
                                                         width="730" onmouseover="this.stop();"
                                                         onmouseout="this.start();">
                                                    <a href="javascript:void(0)"
                                                       style="cursor:hand; background-color : transparent;text-decoration:none;color:#FFFFFF;font-size:12px;"><?php echo __("Announcement") ?>
                                                        : 欢迎来到 ht13168.cn! &nbsp;&nbsp;&nbsp;&nbsp;</a>
                                                </marquee>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="height:22px;">
                                        <div style="background-color:black;  color:gold;height:22px;padding:0px;float:right">
                                            <div style="text-align:right;background: black url(/images/cm/header_timerBg.jpg) repeat-x;width:206px;padding-top:0px;padding-right:10px;color:white;font-weight:normal;height:22px;font-size:14px;">
                                                <table width="100%" cellpadding="0" cellspacing="0" border="0"
                                                       style="padding-top:0px;margin-top:0px;position:relative;top:0px;height:18px;">
                                                    <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="clock">
                                                                <table width="100%">
                                                                    <tr align="center" valign="top">
                                                                        <td id="Date"></td>
                                                                        <td>&nbsp;</td>
                                                                        <td id="hours"></td>
                                                                        <td id="point">:</td>
                                                                        <td id="min"></td>
                                                                        <td id="point">:</td>
                                                                        <td id="sec"></td>
                                                                    </tr>
                                                                </table>
                                                                <!--<div id="Date" style="float: left"></div>
                                                                <ul>
                                                                    <li id="hours"></li>
                                                                    <li id="point">:</li>
                                                                    <li id="min"></li>
                                                                    <li id="point">:</li>
                                                                    <li id="sec"></li>
                                                                </ul>-->
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>

                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
</form>